<template>
    <el-container>
        <el-header>
            <div class="left-panel">
                <el-button
                    type="primary"
                    icon="el-icon-plus"
                    @click="add"
                    v-auths-all="['settingRoleEdit']"
                ></el-button>
                <el-button
                    type="danger"
                    plain
                    icon="el-icon-delete"
                    :disabled="selection.length == 0"
                    v-auths-all="['settingRoleBatchDel']"
                    @click="batchDel"
                ></el-button>
                <el-button
                    type="primary"
                    plain
                    @click="permission"
                    v-auths-all="['settingRoleGetRoleMenuIds']"
                >
                    权限设置
                </el-button>
            </div>
            <div class="right-panel">
                <div class="right-panel-search">
                    <el-input
                        v-model="state.search.keyword"
                        placeholder="角色名称"
                        clearable
                    ></el-input>
                    <el-button
                        type="primary"
                        icon="el-icon-search"
                        @click="handleSearch"
                    ></el-button>
                </div>
            </div>
        </el-header>
        <el-main class="nopadding">
            <kitegoTable
                ref="kitegoTableRef"
                :columns="columns"
                :apiObj="state.apiObj"
                :initParam="state.search"
                row-key="id"
                @selection-change="selectionChange"
                stripe
            >
                <template #status="scope">
                    <el-switch
                        v-model="scope.row.status"
                        disabled
                        :loading="scope.row.$switch_status"
                        active-value="1"
                        inactive-value="0"
                    >
                    </el-switch>
                </template>
                <template #options="scope">
                    <el-button-group>
                        <el-button text type="primary" size="small" @click="tableShow(scope.row)">
                            查看
                        </el-button>
                        <el-button-group v-auths-all="['settingRoleEdit']">
                            <el-button
                                text
                                type="primary"
                                size="small"
                                @click="tableEdit(scope.row)"
                            >
                                编辑
                            </el-button>
                            <el-popconfirm title="确定删除吗？" @confirm="tableDel(scope.row)">
                                <template #reference v-if="scope.row.id != 1">
                                    <el-button text type="primary" size="small">{{
                                        $t('删除')
                                    }}</el-button>
                                </template>
                            </el-popconfirm>
                        </el-button-group>
                    </el-button-group>
                </template>
            </kitegoTable>
        </el-main>
    </el-container>

    <save-dialog
        v-if="state.dialog.save"
        ref="saveDialogRef"
        @success="handleSaveSuccess"
        @closed="state.dialog.save = false"
    >
    </save-dialog>

    <permission-dialog
        v-if="state.dialog.permission"
        ref="permissionDialogRef"
        @closed="state.dialog.permission = false"
        @success="edit"
    >
    </permission-dialog>
</template>
<script lang="ts" setup>
import saveDialog from './save.vue'
import permissionDialog from './permission.vue'
import setting from '@/api/modules/setting.ts'
import type { ColumnProps } from '@/components/kitegoTable/type.ts'
import type { RoleModel } from '@/views/setting/role/type.ts'
import feedback from '@/utils/feedback.ts'

defineOptions({ name: '角色管理' })

const saveDialogRef = ref()
const kitegoTableRef = ref()
const permissionDialogRef = ref()

interface SelectionModel {
    id: number
}
const selection = ref<SelectionModel[]>([])

const state = reactive({
    dialog: {
        save: false,
        permission: false
    },
    apiObj: setting.role.list,
    search: {
        keyword: null
    }
})

// 表格配置项
const columns = reactive<ColumnProps[]>([
    { type: 'selection' },
    { prop: 'label', label: '部门名称' },
    { prop: 'id', label: 'ID', width: 100 },
    { prop: 'sort', label: '排序', width: 100 },
    { prop: 'label', label: '角色名称', width: 100 },
    { prop: 'alias', label: '标识', width: 100 },
    { prop: 'status', label: '状态', width: 100 },
    { prop: 'remark', label: '备注' },
    { prop: 'createTime', label: '创建时间', width: 250 },
    { prop: 'options', label: '操作', fixed: 'right', width: 280 }
])

// 添加
function add() {
    state.dialog.save = true
    nextTick(() => {
        saveDialogRef.value!.open()
    })
}

// 编辑
function tableEdit(row: RoleModel) {
    state.dialog.save = true
    nextTick(() => {
        saveDialogRef.value!.open('edit')
        saveDialogRef.value!.setData(row)
    })
}

// 查看
function tableShow(row: RoleModel) {
    state.dialog.save = true
    nextTick(() => {
        saveDialogRef.value!.open('show')
        saveDialogRef.value!.setData(row)
    })
}

// 权限设置
function permission() {
    if (selection.value.length != 1) {
        feedback.warning('请勾选其中一个角色')
        return
    }
    state.dialog.permission = true
    nextTick(() => {
        permissionDialogRef.value!.open(selection.value[0])
    })
}

// 删除
async function tableDel(row: RoleModel) {
    row.deleteFlag = 1
    await edit(row)
}

// 编辑接口
async function edit(row: RoleModel) {
    await setting.role.edit.post(row)
    kitegoTableRef.value!.refresh()
}

// 批量删除
async function batchDel() {
    await feedback.confirm(
        `确定删除选中的 ${selection.value.length} 项吗？如果删除项中含有子集将会被一并删除`,
        '提示',
        {
            type: 'warning'
        }
    )

    feedback.loading()
    const reqData = {
        ids: selection.value.map((item) => item.id)
    }
    const res = await setting.role.batchDel.post(reqData, { await: 1 })
    if (res) {
        feedback.success('操作成功')
        handleSearch()
    }
    feedback.closeLoading()
}

// 表格选择后回调事件
function selectionChange(value: SelectionModel[]) {
    selection.value = value
}

// 表格内开关
// async function changeSwitch(val: any, row: RoleModel) {
//     if (Object.keys(row).length == 1) return
//     await feedback.confirm('确认操作吗？')
//     await edit(row)
// }

// 搜索
function handleSearch() {
    kitegoTableRef.value!.searchParam = state.search
    kitegoTableRef.value!.search()
}

// 本地更新数据
type Mode = 'add' | 'edit' | 'del'
function handleSaveSuccess(data: RoleModel, mode: Mode) {
    console.log(data, 'data')
    console.log(mode, 'mode')
    handleSearch()
}
</script>

<style></style>
